<template>
<home v-if="tabIndex == 0"></home>
<category v-if="tabIndex == 1"></category>
<book v-if="tabIndex == 2"></book>
<me v-if="tabIndex == 3"></me>

<nut-tabbar  @tab-switch="tabSwitch"  :bottom="true" :safeAreaInsetBottom="true">
  <nut-tabbar-item tab-title="首页" icon="home"></nut-tabbar-item>
  <nut-tabbar-item tab-title="分类" icon="category"></nut-tabbar-item>
  <nut-tabbar-item tab-title="发现" icon="find"></nut-tabbar-item>
  <nut-tabbar-item tab-title="购物车" icon="cart"></nut-tabbar-item>
  <nut-tabbar-item tab-title="我的" icon="my"></nut-tabbar-item>
</nut-tabbar>
</template>

<script>
import { ref } from 'vue'
import home from '@/pages/home/index'
import category from '@/pages/category'
import book from '@/pages/book'
import me from '@/pages/me'

 export default{
   components: {
     home,
     category,
     book,
     me
   },
    setup() {
      let tabIndex = ref(0)
      function tabSwitch(item, index) {
        tabIndex.value = index
        console.log(item, index);
      }
      return {
        tabIndex,
        tabSwitch,
      };
    },
  }
  </script>

